<template>
    <div class="page-selector w76 " :class="show ? 'show' : ''" ref="main">
      <view class="menu-list">
        <view v-for="(item,index) in items" :key="index" :class="active == index ? 'active': ''" class="hor c_fff view align-center h24 justify-center fz-12" @click="getIndex(index)">
          {{ item.name }}
        </view>
      </view>
    </div>
</template>

<script>

export default {
    components: {
      
    },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      items: {
        type: Array,
        default: () => {
          return [
            {
              name: '余额钱包'
            },
            {
              name: '接单钱包'
            },
            {
              name: '佣金钱包'
            }
          ]
        }
      }
    },
    watch: {
      value (now, old) {            
        this.show = now
      },
      show (now, old) {
        this.$emit('input', now)
      }
    },
    mounted() {
      // plus.globalEvent.addEventListener('click', this.bodyCloseMenus)
      // document.addEventListener("click", this.bodyCloseMenus);
    },
    data() {
        return {
          active: 0,
          isOpen: false,
          show: false
        }
    },
    methods: {
      getIndex(i) {
        this.$emit('changEmit', i)
        this.active = i
      },
      bodyCloseMenus(e) {
        let self = this;
        if (!this.isOpen && !this.show) {
          this.isOpen = true
        } else {
          this.show = false
          this.isOpen = false
        }
    },
  }

};
</script>

<style lang="scss" scoped>
 .page-selector {
   position: absolute;
   right: 15px;
   top: 0px;
   height:0;
   overflow: hidden;
   transition: all ease .3s;
   &.show {
     height: auto !important;
   }
 }
 
 .menu-list {background-color: #47475E;overflow: hidden; border-radius: 10rpx;}
 .page-selector {border-radius: 10rpx;}
 .hor:hover {color: #47475E !important; background-color:#68F0FF !important;}
 .active {color: #47475E !important; background-color:#68F0FF !important;}
</style>
